<template>
  <el-form :model="formData">
    <el-row>
      <el-col :span="24">
        <el-form-item
          prop="searchUrl"
          label="搜索地址"
          :label-width="labelWidth"
        >
          <el-input :value="search.url" @input="handleSearchUrl" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          prop="searchPreset"
          label="初始条件"
          :label-width="labelWidth"
        >
          <object-input :value="search.preset" @input="handleSearchPreset" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import ObjectInput from "../../basic/ObjectInput.vue";
import _ from "lodash";
export default {
  name: "TableLocalizeAttributeEditor",
  components: {
    ObjectInput
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {},
      labelWidth: "75px"
    };
  },
  computed: {
    search() {
      return this.value?.search || {};
    },
    localize() {
      return this.createLocalize();
    }
  },
  methods: {
    createLocalize() {
      let localize = _.cloneDeep(this.value || {});
      return { ...localize, search: this.formData };
    },
    handleSearchUrl(url) {
      this.formData.url = url;
      this.$emit("input", this.localize);
    },
    handleSearchPreset(preset) {
      this.formData.preset = preset;
      this.$emit("input", this.localize);
    }
  },
  watch: {
    value(value = {}) {
      this.formData = { ...value.search };
    }
  }
};
</script>
